<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="static/js/tools/jquery-2.1.3.min.js"></script>
<script src="static/tools/bootstrap/js/bootstrap.min.js"></script>
<script src="static/tools/metro/js/metro.js"></script>

<link rel="stylesheet" type="text/css" href="static/tools/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/tools/metro/css/metro.css" />
<link rel="stylesheet" type="text/css" href="static/tools/metro/css/metro-icons.css" />
<link rel="stylesheet" type="text/css" href="static/tools/metro/css/metro-responsive.css" />
<link rel="stylesheet" type="text/css" href="static/tools/metro/css/metro-schemes.css" />

<script type="text/javascript">  
    $(document).ready(function(){  
        var range = 50;             //距下边界长度/单位px  
        var elemt = 500;           //插入元素高度/单位px  
        var maxnum = 20;            //设置加载最多次数  
        var num = 1;  
        var totalheight = 0;   
        var main = $("#content");                     //主体元素  
        
        var elementtxt = "<div class='row' style='padding:5px'>" +
                               "<div class='col-xs-3'>" +
                                  "<img src='static/images/michael.jpg' class='img-responsive' alt='Cinque Terre' width='50' height='50'>" +   
                                "</div>" +
                                "<div class='col-xs-9' style='padding:1px'>" +
                                     "<div class='text-left'>" +
                                         "<h4>sunshijun07@163.com</h4>" +
                                         "<p>技能 : 英语口语、计算机编程、滑雪</p>" +
                                      "</div>" +  
                                 "</div>"   +
                           "</div>" +
                           "<hr class='thin'/>";
        $(window).scroll(function(){  
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
              
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 ："+$(document).height());  
            //console.log('浏览器的高度：'+$(window).height());  
              
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
            if(($(document).height()-range) <= totalheight  && num != maxnum) {  
                main.append(elementtxt); 
                main.append(elementtxt); 
                main.append(elementtxt); 
                main.append(elementtxt); 
                main.append(elementtxt); 
                num++;  
            }  
        });  
    });  
    </script>  




</head>
<body class="bg-dark page-content">      
    <div class="container page-content " id="content" style="color:white">
    
      <div class="row">
        
        <div class="app-bar fixed-top">
            
              <!-- 最左侧图标-->
        <a class="app-bar-element  place-left col-xs-2">
           <span id="toggle-tiles-dropdown2" class="mif-apps mif-3x"></span>
           <div class="app-bar-drop-container" data-role="dropdown" data-toggle-element="#toggle-tiles-dropdown2" data-no-close="false" style="width: 324px;">
           <div class="tile-container bg-white">
                <div class="tile-small bg-cyan">
                     <div class="tile-content iconic">
                          <span class="icon mif-onedrive"></span>
                      </div>
                 </div>
                 <div class="tile-small bg-yellow">
                      <div class="tile-content iconic">
                           <span class="icon mif-google"></span>
                      </div>
                 </div>
                 <div class="tile-small bg-red">
                      <div class="tile-content iconic">
                           <span class="icon mif-facebook"></span>
                      </div>
                 </div>
                 <div class="tile-small bg-green">
                      <div class="tile-content iconic">
                           <span class="icon mif-twitter"></span>
                      </div>
                 </div>
           </div>
         </div>
     </a>
     <!-- 最左侧图标-->
            
       
             
             <div class="col-xs-6">
                  <div class="input-control text fg-dark" data-role="input">
                       <input type="text">
                       <button class="button"><span class="mif-search"></span></button>
                  </div>                 
             </div>
             
              <!--最右侧图标-->
      <div class="app-bar-element place-right col-xs-4">
           <a class="dropdown-toggle fg-white" style="font-size:12pt;"><span class="mif-enter mif-3x"></span> 登录</a>
             <div class="app-bar-drop-container bg-white fg-dark place-right" data-role="dropdown" data-no-close="true">
                  <div class="padding20">
                       <form>
                           <h4 class="text-light">登录</h4>
                           <div class="input-control text">
                                <span class="mif-user prepend-icon"></span>
                                <input type="text">
                           </div>
                           <div class="input-control text">
                                <span class="mif-lock prepend-icon"></span>
                                <input type="password">
                           </div>
                           <label class="input-control checkbox small-check">
                                  <input type="checkbox">
                                  <span class="check"></span>
                                  <span class="caption">记住密码</span>
                           </label>
                           <div class="form-actions">
                                <button class="button">登录</button>
                                <button class="button link">注册..</button>
                           </div>
                      </form>
               </div>
             </div>
       </div>
     <!--最右侧图标-->
             
        </div>
           
      </div>      
    
      
      <div class="row">
        <div class="col-xs-12">
           <h1>帮帮网</h1>
        </div>      
      </div>
      
      
      <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin" />
     
     <div class="row" style="padding:5px">
        <div class="col-xs-3">
            <img src="static/images/michael.jpg" class="img-responsive" alt="Cinque Terre" width="50" height="50">   
        </div>
        <div class="col-xs-9" style="padding:1px">
          <div class="text-left">
            <h4>sunshijun07@163.com</h4>
            <p>技能 : 英语口语、计算机编程、滑雪</p>
          </div>  
        </div>   
      </div>
     <hr class="thin"/>
     
     
     
    </div>
    
    
</body>
</html>
